<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="修改推广卡片" :visible.sync="dialogVisible" @close="resetForm('cardRef')" width="500px">
        <el-form label-position="top" class="card_form" :hide-required-asterisk='true' :model="cardForm" :rules="cardRules" ref="cardRef">
            <el-form-item label="" prop="car_img" style="margin-bottom:10px">
                <div class="card_box flexbox flexcenter" style="width:100%">
                    <img :src="cardForm.car_img" alt="" class="card_img">
                    <div class="card_info flex">
                        <div class="card_name">{{cardForm.car_name}}</div>
                        <div class="card_text" v-for="(item,index) in cardForm.car_tag" v-if="index==0">{{item}}</div>
                    </div>
                    <span class="card_btn">{{cardForm.car_link}}</span>
                </div>
            </el-form-item>
            <el-form-item label="卡片标题" prop="car_name" style="margin-bottom:10px">
                <el-input v-model="cardForm.car_name" placeholder="请输入内容" size="medium" maxlength="7" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="卡片配图" prop="car_img" style="margin-bottom:10px">
                <div class="flexbox">
                    <img :src="cardForm.car_img" alt="" class="card_pic">
                    <div class="card_right">
                        <el-button plain class="plain_blue" size="small" @click="changePicture()">
                            <div class="flexbox flexcenter"><img src="../../assets/img/pot_picture.svg" width="16" height="16" alt="" class="btn_img"> 更换图片</div>
                        </el-button>
                        <div class="img_size">图片尺寸为288px * 288px<br />图片大小不超过1M</div>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="推广卖点" prop="car_tag" style="margin-bottom:10px">
                <el-tag :key="tag" v-for="tag in cardForm.car_tag" :closable="cardForm.car_tag.length>1?true:false" :disable-transitions="false" @close="handleClose(tag)" class="">
                    {{tag}}
                </el-tag>
                <el-input class="input-new-tag" style="width:110px" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加卖点</el-button>
            </el-form-item>
            <el-form-item label="行动号召" prop="car_link" style="margin-bottom:10px">
                <el-select v-model="cardForm.car_link" placeholder="" size="medium" style="width:100%">
                    <el-option label="查看详情" value="查看详情"></el-option>
                    <el-option label="更多精彩" value="更多精彩"></el-option>
                    <el-option label="立即抢购" value="立即抢购"></el-option>
                    <el-option label="了解更多" value="了解更多"></el-option>
                    <el-option label="领取福利" value="领取福利"></el-option>
                    <el-option label="专属优惠" value="专属优惠"></el-option>
                    <el-option label="去逛逛" value="去逛逛"></el-option>
                    <el-option label="更多秒杀" value="更多秒杀"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="is_fisrtchoid" style="margin-bottom:0px">
                <el-checkbox v-model="cardForm.is_fisrtchoid" :true-label="1" :false-label="0">智能优选</el-checkbox>
                <div class="card_tips" v-if="cardForm.is_fisrtchoid==1">系统将基于实时投放数据，展示最有利于转化的文案，帮助提升转化。在无法使用智能优选的流量场景下，将展示你选择的文案。</div>
                <div class="card_tips" v-else>关闭智能优选后，将对所有用户展示你选择的文案</div>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('cardRef')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('cardRef')" :loading="loading" class="el-button-width">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            inputVisible: false,
            inputValue: "",
            index: null,
            type: null,
            cardForm: {
                car_img: "",
                car_link: "查看详情",
                car_name: "视频同款商品",
                car_tag: ["商家倾情推荐"],
                is_fisrtchoid: 1,
                picture_name:'',
            },
            cardRules: {
                car_name: [
                    {
                        required: true,
                        message: "请输入标题",
                        trigger: ["blur", "change"],
                    },
                ],
            },
        };
    },
    created() {
        this.$bus.on("editCardInfo", (value) => {
            this.dialogVisible = value.dialogVsb;
            this.cardForm = JSON.parse(JSON.stringify(value.card));
            this.index = value.index;
            this.type = value.type;
        });

        this.$bus.on("changePicture", (value) => {
            this.cardForm.car_img = value.img_url;
            this.cardForm.picture_name = value.img_name;
        });
    },
    methods: {
        handleClose(tag) {
            this.cardForm.car_tag.splice(this.cardForm.car_tag.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick((_) => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            // if (inputValue.length < 5 || inputValue.length > 9) {
            //     this.$message.error("6-9个字，请正确输入");
            //     return;
            // } else if (inputValue) {
            //     this.cardForm.car_tag.push(inputValue);
            // }
            if (!inputValue) {
                this.inputVisible = false;
                return;
            }else if(inputValue.length < 6 || inputValue.length > 9){
                this.$message.error("6-9个字，请正确输入");
                return;
            } else{
                this.cardForm.car_tag.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = "";
        },

        // 更换图片
        changePicture() {
            const attr = {
                dialogVsb: true,
                change: true,
            };
            this.$bus.emit("editPicture", attr);
        },

        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.type == 1) {
                        this.$parent.createform.creatinfo.creative[
                            this.index
                        ].card = this.cardForm;
                    }else if(this.type==2){
                        this.$parent.createform.card = this.cardForm;
                    }
                    this.$parent.sessionSave()
                    this.dialogVisible = false;
                } else {
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.model_item {
    height: 48px;
    margin: 0 -20px;
    padding: 0 20px;
}
.model_item:hover {
    background-color: rgba(68, 117, 255, 0.05);
}
.length_tips {
    margin-bottom: 10px;
}
.card_pic {
    width: 100px;
    height: 100px;
}
.card_right {
    margin-left: 16px;
}
.img_size {
    font-size: 13px;
    color: #b4b7bd;
    line-height: 18px;
    margin-top: 16px;
}
.card_tips {
    font-size: 12px;
    color: #b4b7bd;
    line-height: 18px;
    margin-top: -2px;
    margin-left: 25px;
}
</style>

<style>
.el-tag + .el-tag {
    margin-left: 10px;
}
.card_form .el-form-item__label {
    padding: 0 !important;
}
</style>
